<template>
  <div class="serch_container">
    <div class="input_container flex justify-center">
      <el-input
        v-model="searchKeyword"
        style="width: 400px"
        size="large"
        placeholder="发现资源"
        @keydown.enter="handleSearch"
      >
        <template #append>
          <el-button type="primary" :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
      <el-button round @click="resetSearch" style="margin-left: 10px; margin-top: 5px"
        >重置</el-button
      >
    </div>
    <div class="tab_container bg-white flex gap-5 pa-1 mt-15">
      <div
        v-for="item in panelList"
        :key="item.id"
        :class="['cursor-pointer', 'pa-2', { tab_item: activeName === item.id }]"
        @click="handleChangeTab(item.id)"
        >{{ item.name }}
      </div>
    </div>
    <div class="search_result_container bg-white mt-5 pa-5">
      <template v-if="activeName === 2">
        <ArticleList :list="taskList!" :pagination="searchPagination" @refresh="handleRefresh">
        </ArticleList>
      </template>
      <template v-if="activeName === 1">
        <UserList
          :data="userList"
          :pagination="searchPagination"
          @refresh="handleRefresh"
        ></UserList>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import ArticleList from '@/components/ArticleList.vue'
import UserList from '@/components/UserList.vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const searchKeyword: any = ref(route.query.searchText)
const handleSearch = () => {
  getData()
}

const activeName = ref(2)
const panelList = [
  {
    name: '综合',
    id: 2,
  },
  {
    name: '用户',
    id: 1,
  },
]

const handleChangeTab = (id) => {
  activeName.value = id
  searchPagination.pageNum = 0
  getData()
}

const searchPagination = reactive({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})

const taskList = ref([])
const userList = ref([])
const getData = async () => {
  const queryData = {
    keyword: searchKeyword.value,
    size: searchPagination.pageSize,
    page: searchPagination.pageNum - 1 < 0 ? 0 : searchPagination.pageNum - 1,
    type: activeName.value,
  }
  await service.task.getDataBySearchKey(queryData).then((res) => {
    if (activeName.value === 1) {
      userList.value = res.list
    } else {
      taskList.value = res.list
    }
    searchPagination.total = res.total
  })
}

const handleRefresh = (pagination?: any) => {
  if (pagination) {
    searchPagination.pageSize = 10
    searchPagination.pageNum = pagination.pageNum
  }
  getData()
}

// 重置搜索框
const resetSearch = () => {
  searchKeyword.value = ''
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.serch_container {
  .tab_container {
    border-radius: 5px;

    .tab_item {
      border-bottom: 3px solid #409eff;
    }
  }
}
</style>
